<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/static/js/jquery.min.js"></script>
    <link href="/static/css/alert.css" rel="stylesheet">
    <!-- <link href="/static/css/css.css" rel="stylesheet"> -->
    <style>
        .main{
            width: 100%;
        }
        .search-data{
            width: 100%;
            margin-top: 10px;
            background-color: #fff;
            padding-bottom: 10px;
        }
        .search-data .search-div{
            margin: 10px 15px;
            display: inline-block;
            width: 365px;
            height: 40px;
        }
        .search-data .search-div:last-child(1){
            display: flex;
            align-items: center;
            justify-self: start;
        }
        .search-data .search-div label{
            display: inline-block;
            width: 100px;
            height: 35px;
            line-height: 35px;
            text-align: right;
            margin-right: 5px;
            font-size: 18px;
            font-weight: bold;
        }
        .search-data .search-div input{
            display: inline-block;
            width: 245px;
            height: 35px;
            line-height: 35px;
            background-color: rgba(245, 245, 245, 1);
            border: 1px solid rgba(77, 77, 77, 1);
            border-radius: 3px;
            color: #666;
            text-indent: 1.5em;
        }
        .search-data .search-div:nth-last-child(1){
            display: block;
        }
        .search-data .search-div a{
            display: inline-block;
            color: #fff;
            background-color: rgba(42, 130, 228, 1);
            padding:5px;
            width: 50px;
            height: 25px;
            line-height: 25px;
            text-align: center;
            text-decoration: none;
            margin: 0px 5px;
        }
        .search-data .search-div a:nth-child(2){
            color: #000;
            background-color: rgba(128, 128, 128, 1);
        }
        .search-data .search-div a:nth-child(3){
            width: 120px;
        }
        .order-page{
            margin-top: 10px;
            width: 100%;
            min-height: 200px;
            background-color: #fff;
        }
        .order-page-table{
            width: 100%;
            border-collapse: collapse;
        }
        .order-page-table thead tr th{
            background-color: #2A82E4;
            color: #fff;
            height: 40px;
            line-height: 40px;
            font-size: 18px;
            width: 18.33%;
        }
        .order-page-table tbody tr{
            border-bottom: 1px solid #444;
        }
        .order-page-table tbody tr td{
            height: 30px;
            line-height: 30px;
            text-align: center;
        }
        .order-page-table tbody tr td a{
            color: #666;
        }
        #info{
            display: none;
        }
        .web-info{
            position: fixed;
            top:10%;
            left:50%;
            width: 600px;
            background: #ddd;
            border: 2px solid #000;
            margin-left: -302px;
        }
        .web-info .web-info-title{
            width: 100%;
            background-color: #2A82E4;
            height: 30px;
        }

        .web-info .web-info-title span{
            color: #fff;
            margin: 0px auto;
            line-height: 30px;
            font-size: 20px;
            padding-left:10px;
        }

        .web-info .web-info-title a{
            color: #fff;
            width: 20px;
            height: 20px;
            padding:5px;
            background-color: red;
            float: right;
            text-align: center;
        }
        .web-info .web-info-content{
            min-height: 180px;
            width: 100%;
        }
        .web-info .web-info-content .web-info-input{
            width: 400px;
            height: 40px;
            line-height: 40px;
            margin: 15px auto;
        }
        .web-info .web-info-content .web-info-input label{
            height: 35px;
            line-height:35px;
            width:100px;
            margin-left:10px;
        }
        .web-info .web-info-content .web-info-input input[type="text"],
        .web-info .web-info-content .web-info-input select{
            height: 35px;
            line-height:35px;
            width:200px;
            margin-left:10px;
        }
        
        .web-info .web-info-content .web-info-button {
            text-align: center;
            margin-bottom: 15px;
        }
        .web-info .web-info-content .web-info-button a{
            width: 150px;
            height: 35px;
            line-height: 35px;
            color: #000;
            border: 1px solid #000;
            background-color: #eee;
            display: inline-block;
            font-weight: bold;
            text-align: center;
            text-decoration: none;
        }
        .web-info .web-info-content .web-info-button a:hover{
            background-color: #2A82E4;
            color: #fff;
        }
        .table-button{
            
            height: 50px;
        }
        .table-button a{
            display: inline-block;
            text-align: center;
            width: 120px;
            margin-left: 15px;
            height: 30px;
            line-height: 30px;
            font-size: 18px;
            color: #fff;
            background-color: #2A82E4;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="web-info" id="info">
        <div class="web-info-title">
            <span>添加网站</span>
            <a href="javascript:;" onclick="hide()">X</a>
        </div>
        <div class="web-info-content">
            <div class="web-info-input">
                <label for="web-name">
                    网站名称
                </label>
                <input type="text" id="web-name" placeholder="网站名称">
            </div>
            <div class="web-info-input">
                <label for="web-web">
                    网站域名
                </label>
                <input type="text" id="web-web" placeholder="网站域名">
            </div>
            <div class="web-info-input">
                <label for="web-classify">
                    网站类型
                </label>
                <select id="web-classify">
                    <option value="生产制造">生产制造</option>
                    <option value="农林化工">农林化工</option>
                    <option value="科教文娱">科教文娱</option>
                    <option value="金融律所">金融律所</option>
                    <option value="食材酒水">食材酒水</option>
                    <option value="建材服饰">建材服饰</option>
                    <option value="新闻博客">新闻博客</option>
                    <option value="其他行业">其他行业</option>
                </select>
            </div>
            <div class="web-info-input">
                <label for="fme1">
                    展现形势
                </label>
                <label for="fme1"><input type="radio" name="fme" id="fme1" value="1" checked>http嵌套</label>
                <label for="fme3"><input type="radio" name="fme" id="fme3" value="3" checked>https嵌套</label>
                <label for="fme2"><input type="radio" name="fme" id="fme2" value="2">抓取</label>
            </div>
            <div class="web-info-input">
                <label for="fm31">
                    网站状态
                </label>
                <label for="fm31"><input type="radio" name="fm3" id="fm31" value="1" checked>正常</label>
                <label for="fm32"><input type="radio" name="fm3" id="fm32" value="2">非正常</label>
            </div>
            <div class="web-info-button">
                <a href="javascript:web();">确定</a>
                <a href="javascript:hide();">取消</a>
            </div>
        </div>
    </div>
    <div class="main">
        <div class="search-data">
            <div class="search-div">
                <label for="name">名称:</label>
                <input type="text" id="name" placeholder="名称" value="{$get.name|default=''}">
            </div>    
            <div class="search-div">
                <label for="web">域名:</label>
                <input type="text" id="web" placeholder="域名" value="{$get.web|default=''}">
            </div>
            <div class="search-div">
                <a href="javascript:;" onclick="order_search()">搜索</a>
                <a href="javascript:;" onclick="order_none()">重置</a>
                <a href="javascript:;" onclick="add_web()">添加网站</a>
            </div>
        </div>
        <div class="order-page">
            <table class="order-page-table">
                <thead>
                    <tr>
                        <th>推广链接</th>
                        <th>域名</th>
                        <th>名称</th>
                        <th>类型</th>
                        <th>添加账号</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="web-list">
                    {volist name="list" id="value"}
                    <tr 
                        {eq name="value.status" value="2"}style="background:red;"{/eq}
                    >
                        <td>
                            <a href="http://wtg.yifei.biz/url/{$value.id}" target="_blank">
                                http://wtg.yifei.biz/url/{$value.id}
                            </a>
                        </td>
                        <td>
                            <a href="{$value.web}" target="_blank">
                                {$value.web}
                            </a>
                        </td>
                        <td>{$value.name}</td>
                        <td>{$value.type_text}</td>
                        <td>{$value.user_data.username}</td>
                        <td>
                            <a href="javascript:save({$value.id});">修改</a>
                            <a href="javascript:del({$value.id});">删除</a>
                        </td>
                    </tr>
                    {/volist}
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="8">
                            <div class="table-button">
                                
                            </div>
                            <div class="page">

                            </div>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</body>
<script>
    var save_id = 0,type = 0,status = 1;
    var info = document.getElementById('info');
    var web_name = document.getElementById('web-name');
    var web_web = document.getElementById('web-web');
    var web_classify = document.getElementById('web-classify');
    var fme = document.getElementsByName('fme');
    var fm3 = document.getElementsByName('fm3');
    function add_web(){
        info.style = 'display:block';
        save_id = 0;
        web_name.value = '';
        web_web.value = '';
        web_classify.value = '生产制造';
    }
    function hide(){
        info.style = 'display:none';
    }
    function save(id){
        save_id = id;
        $.ajax({
            url:'/index/web/info?id=' + id,
            type: 'post', // 请求类型，可以是 'GET' 或 'POST'  
            data:{},
            dataType: 'json', // 预期服务器返回的数据类型  
            success: function(res) {
                if (res.code == 200){
                    info.style = 'display:block';
                    web_name.value = res.data.name;
                    web_web.value = res.data.web;
                    web_classify.value = res.data.classify;
                    fme.forEach(item => {
                        if (item.value == res.data.type){
                            item.checked = true;
                        }
                    });
                    fm3.forEach(item => {
                        if (item.value == res.data.status){
                            item.checked = true;
                        }
                    });
                }else{
                    alert(res.msg);
                }
            }
        });
    }
    function del(id){
        $.ajax({
            url:'/index/web/del?id=' + id,
            type: 'post', // 请求类型，可以是 'GET' 或 'POST'  
            data:{},
            dataType: 'json', // 预期服务器返回的数据类型  
            success: function(res) {
                if (res.code == 200){
                    location.reload();       
                }else{
                    alert(res.msg);
                }
            }
        });
    }
    function web(){
        fme.forEach(item => {
            if(item.checked){
                type = item.value;
            }
        });
        fm3.forEach(item => {
            if(item.checked){
                status = item.value;
            }
        });
        let data = {
            name:document.getElementById('web-name').value,
            web:document.getElementById('web-web').value,
            classify:document.getElementById('web-classify').value,
            type:type,
            status:status
        }
        $.ajax({
            url:'/index/web/save?id=' + save_id,
            type: 'post', // 请求类型，可以是 'GET' 或 'POST'  
            data:data,
            dataType: 'json', // 预期服务器返回的数据类型  
            success: function(res) {
                if (res.code == 200){
                    hide();
                    location.reload();       
                }else{
                    show_after(res.msg);
                }
            }
        });
    }
    function order_search(){
        let name = document.getElementById('name').value;
        let web = document.getElementById('web').value;
        location.href = '/index/web/list?web=' + web + '&name=' + name;
    }
    function order_none(){
        document.getElementById('name').value = '';
        document.getElementById('web').value = '';
    }
</script>
<script src="/static/js/base.js"></script>
</html>